<template>
  <el-menu
    :default-active="activeMenu"
    class="sidebar-menu"
    router
    background-color="#304156"
    text-color="#bfcbd9"
    active-text-color="#409EFF"
    :unique-opened="true"
  >
    <!-- 固定首页 -->
    <el-menu-item index="/home">
      <i class="el-icon-house"></i>
      <span>首页</span>
    </el-menu-item>

    <!-- 动态路由渲染 -->
    <SidebarItem
      v-for="route in routes"
      :key="route.path"
      :item="route"
    />
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '@/store/auth'
import SidebarItem from '@/components/SidebarItem.vue'

const route = useRoute()
const authStore = useAuthStore()

// 动态路由（去掉静态 home，避免重复）
const routes = computed(() =>
  (authStore.routes || []).filter(r => r.path !== '/home')
)

const activeMenu = computed(() => route.path)
</script>

<style scoped>
.sidebar-menu {
  width: 200px;
  height: 100%;
  border-right: none;
}
</style>
